<template>
	<view class="index">
		<!-- 背景渐变 -->
		<view class="login-bg"></view>
		
		<view class="cu-swper">
			<swiper class="sw" 
			autoplay 
			circular
			indicator-color="rgba(190, 200,216, .3)"
			indicator-active-color="#333"
			indicator-dots>
				<swiper-item  class="switem" v-for="item of swiper" :key="item.id">
					<image class="image" mode="scaleToFill" :src="item.img"></image>
				</swiper-item>
									
			</swiper>
		</view>
		
		<!-- 订单管理 -->
		<view class="cu-cards">
			<!-- 头部 -->
			<view class="cu-order">
				<text class="order-title">订单管理</text>
				<navigator url="/pages/myOrder/myOrder?orderType=0">
					<text class="order-title2">全部订单 ></text>
				</navigator>
			</view>
			
			<!-- 菜单项 -->
				<view class="cu-items">
					<view v-for="(item,index) of list" :key="item" class="item-conent">
						<navigator :url="`/pages/myOrder/myOrder?orderType=${index}`">
							<image class="item-image" :src="`../../static/images/${index}@2x.png`"></image>
							<text class="item-text">{{item}}</text>
						</navigator>
						
					</view>
				</view>
		</view>
	
		<!-- 创建订单 -->
		<view class="cu-crtate" @click="create">
			<text>创建订单</text>
			<image class="crtate-image" src="../../static/images/Polygon.png"></image>
		</view>
		
		<!-- 辅助功能 -->
		<view class="cu-fuzhu">
			<!-- 头部 -->
			<view class="cu-order">
				<text class="order-title">辅助功能</text>
			</view>
			
			<view class="fuzhu-item">
				<view class="item-top">
					<image class="qianimage" src="../../static/images/Frame@2x.png"></image>
					<text>发货地址</text>
				</view>
				<image class="houimage" src="../../static/images/rightjiantou@2x.png"></image>
			</view>
			
			<navigator url="/pages/userinfo/userinfo">
				<view class="fuzhu-item">
					<view class="item-top">
						<image class="qianimage" src="../../static/images/Frame1@2x.png"></image>
						<text>个人信息</text>
					</view>
					<image class="houimage" src="../../static/images/rightjiantou@2x.png"></image>
				</view>
			</navigator>
		</view>
		
		<!-- //遮罩层 -->
		<view v-if="zzz" class="cu-zz" @click="zz">
			
		</view>
	</view>
</template>

<script>
	import { getOrdrStatus ,getSwper} from '../../api/index.js'
	import tuiGrid from "@/components/thorui/tui-grid/tui-grid"
	import tuiGridItem from "@/components/thorui/tui-grid-item/tui-grid-item"
	export default {
		data() {
			return {
				swiper:[],
				zzz:true,
				list:[
					'待报价',
					'待确认',
					'待付款',
					'待发货',
					'已驳回',
					'取消审核',
					'已取消',
					'已完成',
				],
				
			}
		},
		components:{
			tuiGrid,
			tuiGridItem
		},
		onLoad() {
			
			this.getSwiper()
		},
		onShow(){
			if(!uni.getStorageSync('user')){
				this.zzz = true
			}else{
				this.zzz = false
			}
		},
		methods: {
			async getSwiper(){
				const {records} =  await getSwper()
				console.log(records)
				this.swiper = records
				
			},
			//点击创建跳转
			create(){
				const info = uni.getStorageSync('info')
				if(info.wxPay === ''){
					uni.showToast({
						title:'请先在个人信息中上传微信收款码照片',
						icon:'none'
					})
				}else{
					uni.navigateTo({
						url:'../fenlei/fenlei'
					})
				}
				
			},
			//点击遮罩层判断有没有登录
			zz(){
				if(!Boolean(uni.getStorageSync('user'))){
					uni.showModal({
						title:"提示",
						content:'当前没有登录，确定返回登录页面',
						success:res=>{
							if(res.confirm){
								uni.navigateTo({
									url:'../login/login'
								})
							}
						}
					})
				}else{
					this.zzz = false
				}
			}
		}
	}
</script>

<style>
	/* 背景渐变 */
	.login-bg{
		width: 100%;
		height: 450rpx;
		background-image: linear-gradient(to bottom,#4470F4,#F6F6F6);
	}
	
	
	/* 遮罩层 */
	.cu-zz{
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background-color: #06AD56;
		opacity: 0;
		z-index: 9999;
	}
	
	/* 轮播图 */
	.cu-swper{
		width: 686rpx;
		height: 240rpx;
		position: absolute;
		top:32rpx;
		left: 32rpx;
		border-radius: 18rpx;
	}
	
	.sw{
		width: 100%;
		height: 100%;
	}
	.swiper{
		width: 100%;
		height: 100%;
	}
	 .image{
		width: 100%;
		height: 100%;
		border-radius: 18rpx;
	}
	/* 订单管理 */
	.cu-cards{
		width: 686rpx;
		position: absolute;
		top:305rpx;
		left: 32rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		background-color: #fff;
		padding: 32rpx;
	}
	
	.cu-order{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}
	
	.order-title{
		font-size: 36rpx;
		color: #333;
		font-weight: 700;
	}
	.order-title2{
		font-size: 28rpx;
		color: #666;
		font-weight: 700;
	}
	
	/* 菜单项 */
	.cu-items{
		width: 100%;
		font-size: 24rpx;
		color: #333;
		display: grid;
		grid-template-columns:repeat(4,1fr) ;
		row-gap:32rpx;
		column-gap: 78rpx;
		
	}
	
	.item-conent{
		width: 96rpx;
		height:116rpx;
		text-align: center;
	}
	.item-image{
		width:100%;
		height: 68rpx;
	}
	
	/* 创建订单 */
	.cu-crtate{
		width: 686rpx;
		height: 112rpx;
		border-radius: 16rpx;
		background-color: #4470F4;
		position: absolute;
		top:745rpx;
		left: 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		color: #fff;
		font-size: 36rpx;
		font-weight: 700;
	}
	
	.crtate-image{
		width: 15rpx;
		height: 10px;
	}
	
	/* 辅助功能 */
	.cu-fuzhu{
		width: 686rpx;
		position: absolute;
		top: 884rpx;
		left: 32rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx;
	}
	
	.fuzhu-item{
		width: 100%;
		height: 90rpx;
		border-bottom: 1px solid #EEE;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.fuzhu-item>.item-top>.qianimage{
		width: 56rpx;
		height: 56rpx;
		margin-right: 20rpx;
	}
	.fuzhu-item>.houimage{
		width: 32rpx;
		height: 32rpx;
		
	}
	.fuzhu-item>text{
		font-size: 28rpx;
		color: #333;
		font-weight: 700;
	
	}
	.item-top{
		display: flex;
		align-items: center;
	}
</style>
